<template>
    <ul class="news-list">
      <li class="item"><strong>编号:{{ route.query.id }}</strong> xxx</li>
      <li class="item"><strong>标题:{{ route.query.title }}</strong> xxx</li>
      <li class="item"><strong>内容:{{ route.query.content }}</strong> xxx</li>
    </ul>
  </template>
  
  <script setup lang="ts" name="Detail">
    import router from '@/router';  
    import { useRoute } from 'vue-router';
    let route = useRoute()
  </script>
  
  <style scoped>
  .news-list {
    list-style-type: none;  /* 去掉默认的列表符号 */
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 20px auto;
  }
  
  .item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  .item:last-child {
    border-bottom: none;
  }
  
  strong {
    color: #333;
  }
  
  li {
    font-size: 14px;
    color: #555;
  }
  
  li:nth-child(odd) {
    background-color: #f1f1f1;
  }
  
  li:nth-child(even) {
    background-color: #fff;
  }
  </style>